<template>
  <div class="card">
    <div class="card_header flex">
      <div class="left">{{ title }}</div>
      <div class="right">{{ subtitle }}</div>
    </div>
    <!-- 插槽填入 -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
defineProps(['title', 'subtitle']);
</script>

<style scoped>
.card {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}

.card .card_header {
  width: 100%;
  background: green;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 10rpx;
}

.card .card_header .left {
  color: white;
  font-weight: 400;
  font-style: italic;
}

.card .card_header .right {
  color: #ccc;
}
</style>
